<template>
  <div>
    <div class="guess_box">
      <div
        class="guess"
        v-for="(item,index) in guessList.educationLIST"
        :key="index"
        @click="jiaoyudetail(item)"
      >
        <img
          class="cover"
          :src="item.cover"
          alt=""
        >
        <div
          class="guess_wz"
          v-if="clas === 'one_money' ||clas === 'up_sort'  "
        >
          <div class="guess_wz_tit">{{item.name}}</div>
          <div class="guess_wz_price">
            <div>{{item.class_sum}}课时 |
              <span style="text-decoration:line-through">{{item.money}}</span>
              <span class="guess_wz_buy">￥{{item.preferential_money}}</span>
            </div>
          </div>
        </div>
        <div
          class="guess_wz"
          v-else
        >
          <div class="guess_wz_tit">{{item.name}}</div>
          <div class="guess_wz_class">{{item.chtitle}}</div>
          <!-- <div>{{homeaudio}}</div>
          <div>{{item.audio.content}}</div> -->
          <!-- <p class="teacher-name">{{item.teacher_name}}</p> -->
          <div class="guess_wz_price">
            <div>{{item.class_sum}}课时 |
              <span style="text-decoration:line-through">{{item.money}}</span>
              <span class="guess_wz_buy">￥{{item.preferential_money}}</span>
            </div>
            <!-- <div class="guess_wz_buy">&nbsp;&nbsp;¥{{item.preferential_money}}</div> -->
            <div
              v-if="!clas && item.audio && item.audio.content"
              class="trydemo"
              @click.stop="trydemo(item)"
            >
              <img
                v-if="homeaudio !== item.audio.content"
                src="https://o6wndwjxn.qnssl.com/%E6%92%AD%E6%94%BE-2@2x.png"
              >
              <img
                v-if="homeaudio === item.audio.content && audiostate"
                src="https://o6wndwjxn.qnssl.com/%E6%92%AD%E6%94%BE-2@2x.png"
              >
              {{ homeaudio === item.audio.content  && !audiostate ? '暂停':'试听'}}
              <!-- {{audiostate}}
              {{homeaudio === item.audio.content}} -->
            </div>
            <!-- <div class="demo" @click.stop="tryaudio(item)">试听</div> -->
          </div>
        </div>
        <!-- <div
          class="guess_wz"
        >
          <div class="guess_wz_tit">{{item.name}}</div>
          <div class="guess_wz_class">{{item.title}}</div>
          <div class="guess_wz_price">
            <div>{{item.class_sum}}课
              <span class="guess_wz_buy1">赚￥{{item.top_money}}</span>
            </div>
          </div>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
// import { addlatelyclass } from '@/api/home'
import { mapState } from 'vuex'
export default {
  props: ['guessList', 'clas'],
  data () {
    return {
      audiostate: this.$store.state.audio.audioplayer.audio.paused
    }
  },
  computed: {
    ...mapState({
      homeaudio: state => state.audio.homeaudio,
      audioplayer: state => state.audioplayer,
      user_id: state => state.member_id
    })
  },
  methods: {
    jiaoyudetail (item) {
      // console.log(item)
      this.$emit('jiaoyudetail', item)
    },
    trydemo (item) {
      this.$store.commit('setselect', item.audio)
      this.$store.commit('homeaudio', item.audio.content)
      this.$store.state.audio.audioplayer.toggle()
      this.audiostate = this.$store.state.audio.audioplayer.audio.paused
      // let obj = {
      //   chapter_id: item.audio.chapter_id,
      //   member_id: this.user_id,
      //   curriculum_id: item.audio.curriculum_id
      // }
      // addlatelyclass(obj).then(res => {
      //   console.log(res)
      // })
    }
  },
  components: {},
  created () {
    // console.log(this.guessList)
  }
}
</script>
<style>
.trydemo {
  width: 50px;
  line-height: 18px;
  height: 18px;
  font-family: PingFangSC-Regular;
  font-size: 10px;
  text-align: center;
  color: #da4131;
  border-radius: 12px;
  position: absolute;
  right: 0;
  bottom: 0;
  background-color: #fef0f0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.trydemo img {
  width: 6px;
  height: 8px;
  margin-right: 2px;
}
.huaxianjia {
  font-family: PingFangSC-Regular;
  font-size: 11px;
  color: #999999;
  text-align: left;
}
.teacher-name {
  font-size: 12px;
  color: #999999;
}
.guess_box {
  width: calc(100vw * 686 / 750);
  margin: 0 auto;
  /* padding-bottom: 20px; */
}
.guess {
  margin-bottom: 25px;
}
.guess .cover {
  width: calc(100vw * 274 / 750);
  height: calc(100vw * 274 / 750 * 188 / 274);
  border-radius: 5px;
  display: inline-block;
  vertical-align: top;
  margin-right: calc(100vw * 20 / 750);
}
.guess_wz {
  display: inline-block;
  width: calc(100vw * 366 / 750);
  height: calc(100vw * 274 / 750 * 188 / 274);
  vertical-align: top;
  position: relative;
}
.guess_wz_tit {
  font-family: PingFangSC-Medium;
  font-size: 15px;
  font-weight: bold;
  font-stretch: normal;
  line-height: 20px;
  letter-spacing: 1px;
  color: #333333;
  text-overflow: ellipsis;
  display: -webkit-box;
  /* -webkit-box-orient: vertical; */
  /*! autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.guess_wz_class {
  font-family: PingFangSC-Regular;
  font-size: 12px;
  letter-spacing: 1px;
  color: #999999;
  text-overflow: ellipsis;
  display: -webkit-box;
  /* -webkit-box-orient: vertical; */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin: calc(100vw * 274 / 750 * 2 / 274) 0px;
}
.guess_wz_price {
  font-family: PingFangSC-Regular;
  font-size: 12px;
  letter-spacing: 1px;
  width: 100%;
  color: #999999;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content: space-between;
  align-content: space-between;
  align-items: center;
  position: absolute;
  bottom: 0;
}
.guess_wz_buy {
  font-size: 12px;
  color: #da4131;
}
.guess_wz_buy1 {
  font-size: 12px;
  color: #da4131;
  text-align: right;
  position: absolute;
  right: 0;
  bottom: 0;
}
.demo {
  width: 50px;
  line-height: 18px;
  height: 18px;
  font-family: PingFangSC-Regular;
  font-size: 10px;
  text-align: center;
  color: #da4131;
  border-radius: 12px;
  position: absolute;
  right: 0;
  background-color: #fef0f0;
}
</style>
